<template>
  <div>
    <b-alert
      v-if="form.success" dismissible
      :show="showAlert" variant="success" @dismissed="showAlert=false"
    >修改成功</b-alert>
    <b-alert
      v-else dismissible
      :show="showAlert" variant="danger" @dismissed="showAlert=false"
    >修改失败</b-alert>
    <b-card class="luke-table-sm">
      <b-row slot="header">
        <h3 class="luke-table-heading">大老板审核</h3>
        <b-button variant="primary" class="luke-table-refresh" @click="refresh">
          刷新
        </b-button>
      </b-row>
      <b-card class="luke-card">
        <b-form @submit="onSubmit">
          <b-form-group :label="eventLabel" horizontal>
            <b-form-textarea
              placeholder="事件" disabled :value="report.event"
              :rows="3" :max-rows="6"></b-form-textarea>
          </b-form-group>
          <b-form-group label="结束下注时间：" horizontal class="time-group">
            <b-form-input disabled class="luke-input-year" :value="report.finishTime.year"></b-form-input>
            <label>年</label>
            <b-form-input disabled :value="report.finishTime.month"></b-form-input>
            <label>月</label>
            <b-form-input disabled :value="report.finishTime.day"></b-form-input>
            <label>日</label>
            <b-form-input disabled :value="report.finishTime.hour"></b-form-input>
            <label>时</label>
            <b-form-input disabled :value="report.finishTime.minute"></b-form-input>
            <label>分</label>
            <b-form-input disabled :value="report.finishTime.second"></b-form-input>
            <label>秒</label>
          </b-form-group>
          <b-form-group label="结算时间：" horizontal class="time-group">
            <b-form-input disabled class="luke-input-year" :value="report.settleTime.year"></b-form-input>
            <label>年</label>
            <b-form-input disabled :value="report.settleTime.month"></b-form-input>
            <label>月</label>
            <b-form-input disabled :value="report.settleTime.day"></b-form-input>
            <label>日</label>
            <b-form-input disabled :value="report.settleTime.hour"></b-form-input>
            <label>时</label>
            <b-form-input disabled :value="report.settleTime.minute"></b-form-input>
            <label>分</label>
            <b-form-input disabled :value="report.settleTime.second"></b-form-input>
            <label>秒</label>
          </b-form-group>
          <b-form-row tag="b-row" align-h="end">
            <b-button type="submit" variant="primary" v-html="form.submit" :disabled="form.disabled"></b-button>
          </b-form-row>
        </b-form>
      </b-card>
      <b-card class="luke-card">
        <b-form @submit="onSubmitCommit">
          <b-form-group :label="eventLabel" horizontal>
            <b-form-textarea
              placeholder="事件" v-model="form.data.event" :disabled="form.disabled"
              :rows="3" :max-rows="6"></b-form-textarea>
          </b-form-group>
          <b-form-group label="结束下注时间：" horizontal class="time-group">
            <b-form-input v-model="form.data.finishTime.year" :disabled="form.disabled" class="luke-input-year"></b-form-input>
            <label>年</label>
            <b-form-input v-model="form.data.finishTime.month" :disabled="form.disabled"></b-form-input>
            <label>月</label>
            <b-form-input v-model="form.data.finishTime.day" :disabled="form.disabled"></b-form-input>
            <label>日</label>
            <b-form-input v-model="form.data.finishTime.hour" :disabled="form.disabled"></b-form-input>
            <label>时</label>
            <b-form-input v-model="form.data.finishTime.minute" :disabled="form.disabled"></b-form-input>
            <label>分</label>
            <b-form-input v-model="form.data.finishTime.second" :disabled="form.disabled"></b-form-input>
            <label>秒</label>
          </b-form-group>
          <b-form-group label="结算时间：" horizontal class="time-group">
            <b-form-input v-model="form.data.settleTime.year" :disabled="form.disabled" class="luke-input-year"></b-form-input>
            <label>年</label>
            <b-form-input v-model="form.data.settleTime.month" :disabled="form.disabled"></b-form-input>
            <label>月</label>
            <b-form-input v-model="form.data.settleTime.day" :disabled="form.disabled"></b-form-input>
            <label>日</label>
            <b-form-input v-model="form.data.settleTime.hour" :disabled="form.disabled"></b-form-input>
            <label>时</label>
            <b-form-input v-model="form.data.settleTime.minute" :disabled="form.disabled"></b-form-input>
            <label>分</label>
            <b-form-input v-model="form.data.settleTime.second" :disabled="form.disabled"></b-form-input>
            <label>秒</label>
          </b-form-group>
          <b-form-row tag="b-row" align-h="end">
            <b-button type="submit" variant="primary" v-html="form.submit_commit" :disabled="form.disabled"></b-button>
          </b-form-row>
        </b-form>
      </b-card>
    </b-card>
  </div>
</template>

<script>
  import Config from '@/assets/global-config'
  import axios from 'axios'
  export default {
    name: 'Abnormal',
    data () {
      return {
        form: {
          data: {
            did: '',
            event: '',
            finishTime: {
              year: '',
              month: '',
              day: '',
              hour: '',
              minute: '',
              second: ''
            },
            settleTime: {
              year: '',
              month: '',
              day: '',
              hour: '',
              minute: '',
              second: ''
            }
          },
          submit: '确定不用修改',
          submit_commit: '确认已修改',
          disabled: false,
          success: 'success'
        },
        report: {
          event: '',
          finishTime: {
            year: '',
            month: '',
            day: '',
            hour: '',
            minute: '',
            second: ''
          },
          settleTime: {
            year: '',
            month: '',
            day: '',
            hour: '',
            minute: '',
            second: ''
          }
        },
        showAlert: false
      }
    },
    created () {
      this.fetchData()
    },
    computed: {
      eventLabel () {
        return `事件（${this.form.data.did}）：`
      }
    },
    methods: {
      refresh () {
        this.fetchData(() => {
          this.showAlert = false
        })
      },
      fetchData (callback) {
        let that = this
        axios.get(Config.get_abnormal_action())
        .then(function (response) {
          console.log(response.data)
          that.report = response.data
          that.form.data = response.data
          if (callback) {
            callback()
          }
        })
        .catch(function (error) {
          console.log(error)
        })
      },
      onSubmit (event) {
        event.preventDefault()
        let that = this

        this.form.submit = '提交中...'
        this.form.disabled = true

        axios.post(Config.abnormal_action(), JSON.stringify({ commit: 0, did: this.form.data.did }))
        .then(function (response) {
          console.log(response)
          that.form.submit = '确定不用修改'
          that.form.disabled = false
          if (response.status === 200) {
            that.form.success = true
          } else {
            that.form.success = false
          }
          that.showAlert = true
          that.fetchData()
        })
        .catch(function (error) {
          console.log(error)
          that.form.submit = '确定不用修改'
          that.form.disabled = false
          that.form.success = false
          that.showAlert = true
        })
      },
      onSubmitCommit (event) {
        event.preventDefault()
        let that = this

        this.form.submit_commit = '提交中...'
        this.form.disabled = true

        axios.post(Config.abnormal_action(), JSON.stringify({ commit: 1, ...this.form.data }))
        .then(function (response) {
          console.log(response)
          that.form.submit_commit = '确认已修改'
          that.form.disabled = false
          if (response.status === 200) {
            that.form.success = true
          } else {
            that.form.success = false
          }
          that.showAlert = true
        })
        .catch(function (error) {
          console.log(error)
          that.form.submit_commit = '确认已修改'
          that.form.disabled = false
          that.form.success = false
          that.showAlert = true
        })
      }
    }
  }
</script>
